import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {ProTable} from "@ant-design/pro-components";
import {useRef, useState} from "react";
import {Button, Dropdown, Space, Tag} from "antd";
import {EllipsisOutlined, PlusOutlined} from "@ant-design/icons";
import {TableDropdown} from "@ant-design/pro-table";


type DataType = {
    url: string;
    id: number;
    number: number;
    title: string;
    labels: {
        name: string;
        color: string;
    }[];
    state: string;
    comments: number;
    created_at: string;
    updated_at: string;
    closed_at?: string;
};
const tableData: DataType[] = [
    {
        url: "https://github.com/ant-design/ant-design/issues/12345",
        id: 1,
        number: 12345,
        title: "修复 Button 组件在暗色主题下的颜色问题",
        labels: [
            { name: "bug", color: "#d73a4a" },
            { name: "UI", color: "#7057ff" }
        ],
        state: "open",
        comments: 8,
        created_at: "2023-09-10T08:00:00Z",
        updated_at: "2023-09-12T14:30:00Z"
    },
    {
        url: "https://github.com/ant-design/ant-design/issues/12346",
        id: 2,
        number: 12346,
        title: "新增 Table 单元格合并功能示例文档",
        labels: [
            { name: "documentation", color: "#0075ca" },
            { name: "enhancement", color: "#a2eeef" }
        ],
        state: "closed",
        comments: 3,
        created_at: "2023-08-25T10:15:00Z",
        updated_at: "2023-09-01T16:45:00Z",
        closed_at: "2023-09-01T16:45:00Z"
    },
    {
        url: "https://github.com/ant-design/ant-design/issues/12347",
        id: 3,
        number: 12347,
        title: "优化 Select 下拉菜单的滚动性能",
        labels: [
            { name: "performance", color: "#ff8f49" },
            { name: "component", color: "#43b6e9" }
        ],
        state: "open",
        comments: 15,
        created_at: "2023-09-15T09:30:00Z",
        updated_at: "2023-09-18T11:20:00Z"
    }
];

const columns: ProColumns<DataType>[] = [
    {
        dataIndex: 'index',
        valueType: 'indexBorder',
        width: 48,
    },
    {
        title: '标题',
        dataIndex: 'title',
        copyable: true, // 是否支持复制
        ellipsis: true, // 是否自动缩略
        tooltip: '标题过长会自动收缩', // 标题后展示提示
        formItemProps:{
            rules:[{
                required:true,
                message:"必填"
            }]
        }

    },
    {
        disable: true,
        title: '状态',
        dataIndex: 'state',
        filters: true,  // todo???
        onFilter: true, // 是否展示过滤
        ellipsis: true,
        valueType: 'select', // 不同的值生成不同的渲染器
        valueEnum:{
            all:{text:"超长".repeat(50)},
            open:{
                text:"未解决",status:"Error"
            },
            closed:{
                text:"已解决",status:"Success"
            },
            processing:{
                text:"解决中",status:"Processing"
            }
        }

    },
    {
        disable: true,
        title: '标签',
        dataIndex: 'labels',
        search: false,
        render:(_,record)=>{
            return (
                <Space>
                    {record.labels.map(({name,color})=>{
                        return <Tag color={color} key={name}>{name}</Tag>
                    })}
                </Space>
            )
        },
        renderFormItem:()=>{
            return (<div>123</div>)
        }
    },
    {
        title: '创建时间',
        key: 'showTime',
        dataIndex: 'created_at',
        valueType: 'date',
        sorter: true,
        hideInSearch: true,
    },
    {
        title: '创建时间',
        dataIndex: 'created_at',
        valueType: 'dateRange',
        hideInTable: true,
        search: {
            transform:(value)=>{
                console.log(value,"value11111")
                return {
                    startTime:value[0],
                    endTime:value[1]
                }
            }
        }
    },
    {
        title:"操作",
        valueType:"option",
        key:"option",
        render:(text,record,_,action)=>[
            <a key="editable" onClick={()=>{
                action?.startEditable?.(record.id)
            }}>编辑</a>,
            <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
                查看
            </a>,
        ]
    }


];

export default () => {

    const actionRef = useRef<ActionType>();

    const [queryParams,setQueryParams] = useState({
        current:1,
        pageSize:10
    })
    return (
        <ProTable
            cardBordered
            actionRef={actionRef}
            columns={columns}
            params={queryParams}
            request={async ()=>{
                return {
                    success:true,
                    total:3,
                    data:tableData
                }
            }}
            pagination={{
                pageSize:10,
                onChange:(page)=>console.log(page)
            }}

            headerTitle="高级表格"
            toolBarRender={()=>[
                <Button type="primary" key="button" icon={<PlusOutlined/>} >add</Button>,
                <Dropdown key="menu" menu={{
                    items:[
                        {label:"111",key:"111"}
                    ]
                }}>
                    <Button><EllipsisOutlined/></Button>
                </Dropdown>
            ]}




            // search的样式配置
            search={{
                labelWidth:80,
                searchText:"search",
            }}

            // 配置右上角图标，是否显示隐藏
            options={{
                reload:false,
                setting:{
                    listsHeight:400,
                    draggable:false,
                    checkable:true
                },

            }}



            // 你配置的 设置的列属性保存，，右上角设置按钮，设置的列状态
            columnsState={{
                persistenceKey:"pro-table-single-demos",
                persistenceType:"localStorage",
                defaultValue:{
                    option:{
                        fixed:"right",disable:true
                    }
                },
                onChange(value){
                    console.log(value,"value")
                }
            }}



            editable={{
                type:"multiple"
            }}

            rowKey="id"



        >

        </ProTable>
    );
};
